<template>
	<view class="container ">
		<tui-navigation-bar @init="initNavigation" backgroundColor="#fff" color="#333">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="tabs-list">
					<view class="tabs" :class="{'active':item.id == tabs.current}" v-for="(item,index) in tabs.list"
						:key="item.id" @tap.stop.prevent="onTab(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</tui-navigation-bar>
		<layout @scrolltolower="scrolltolower" @scroll="scroll" @refresherrefresh="refresherrefresh" refresher>
			<view class="main">
				<view class="main-loading">
					<uv-loading-icon :show="!postList.loading" :size="28" timing-function="linear"
						mode="circle"></uv-loading-icon>
				</view>
				<view class="appraise-list" v-if="postList.list.length > 0">
					<view class="appraise-item" v-for="(item ,index) in postList.list" :key="item.id"
						:class="{'noBorder': index == postList.list.length - 1}">
						<post-item :size="'90rpx'" from="index" :post_type="item.forumType" :basicsWidth="widthrpx"
							:basicsWidthPx="basicsWidthPx" :post="item" @clickHead="clickHead" @clickVideo="clickVideo">
							<view v-if="item.forumType == 0" class="refer-box">
								<view class="refer">提到了：</view>
								<view class="order" @tap.stop.prevent="clickHead(item.forumOrder)"
									v-if="item.forumOrder">
									<view class="accompany-profile">
										<image class="avatarUrl" :src="item.forumOrder.avatar" mode="aspectFill">
										</image>
									</view>
									<view class="user-name onelist-hidden">{{item.forumOrder.nickName}}</view>
								</view>
							</view>
						</post-item>
					</view>
				</view>
				<view v-show="postList.loading && postList.list.length <= 0">
					<empty fixed></empty>
				</view>
				<view v-show="load.loading">
					<uv-load-more :status="load.status" :loading-text="load.loadingText" :nomore-text="load.nomoreText"
						:line="load.status == 'nomore'" />
				</view>
			</view>

		</layout>
		<uv-preview-video ref="previewVideo"></uv-preview-video>
		<button v-if="userInfo.settleState == 1" class="btn-primary btn-submit"
			@tap.stop.prevent="goPage('/page_community/send/send')">??发动态</button>
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar"></tabbar>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import layout from '@/components/jp-layout/layout.vue';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			tabbar,
			layout
		},
		data() {
			return {
				tabbarCurrent: 1, //当前索引
				tabBar: app.globalData.tabBar,
				globalData: app.globalData,
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '', //标题
				labelList: [{}, {}, {}],
				widthPx: app.globalData.systemInfo.windowWidth * 2 - 24 * 2 - 106,
				widthrpx: 0,
				rpx: app.globalData.widthPx / 750,
				basicsWidthPx: '',
				postList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				userInfo: {},
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				tabs: {
					list: [{
						id: 'all',
						name: '全部',
						cut: true
					}, {
						id: 'appraise',
						name: '只看评价',
						cut: false
					}, {
						id: 'dynamic',
						name: '只看动态',
						cut: false
					}],
					current: 'all',
					status: false,
				},
				setPicture: false,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.getPageData()
		},
		onShow: function() {
			this.widthrpx = app.globalData.systemInfo.windowWidth / this.rpx - 24 * 2 - 106,
				this.basicsWidthPx = ['web', 'h5'].includes(app.globalData.systemInfo.uniPlatform) ? -(this.widthrpx *
					this.rpx) + 'px' : (-this.widthrpx) + 'rpx'
			this.userInfo = uni.getStorageSync('user_info') ? uni.getStorageSync('user_info') : {};
			if (app.globalData.isLogin) {
				this.userDetails()
			}
			uni.hideTabBar()
			app.globalData.tabBar[0].name = 'active-home'
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.postList.page = 1
			this.getPageData()
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			if (this.postList.hasMore && this.postList.loading) {
				this.load.loading = true
				this.getPageData()
			}
		},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestPengList()]).then(() => {
					uni.stopPullDownRefresh();
					callback && callback()
				});
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrolltolower() {
				if (this.postList.hasMore && this.postList.loading) {
					this.load.loading = true
					this.getPageData()
				}
			},
			refresherrefresh(fun = function() {}) {
				this.postList.page = 1
				this.getPageData(fun);
			},
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			userDetails() {
				app._post_form("/client/getById", null, (res) => {
					let user_info = uni.getStorageSync('user_info');
					user_info.realAuthState = res.data.realAuthState
					user_info.shelfState = res.data.shelfState
					user_info.settleState = res.data.settleState
					user_info.authInfo.name = res.data.nickName
					user_info.avatarUrl = res.data.avatar
					uni.setStorageSync('user_info', user_info);
					app.globalData.UserInfo = user_info
					this.userInfo = user_info
				}, false, () => {})
			},
			clickHead(e) {
				app.navigationTo('page_sharing/accompany/details?id=' + e.userId + '&from=1')
			},
			clickVideo(item) {
				this.$refs.previewVideo.open(item.fileUrl);
			},
			onTab(item) {
				if (this.tabs.current != item.id) {
					this.load.loading = false
					this.tabs.current = item.id
					this.tabs.status = true
					this.postList.page = 1
					this.postList.list = []
					this.requestPengList().then(() => {
						setTimeout(() => {
							this.tabs.status = false
						}, 500)
					})
				}
			},
			// 动态列表查询
			requestPengList() {
				return new Promise((resolve, reject) => {
					this.postList.loading = false
					app._post_form(
						"/client/forum/page", {
							current: this.postList.page,
							extra: {},
							model: {
								forumType: this.tabs.current == 'all' ? null : this.tabs.current ==
									'appraise' ? 0 : 1,
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.postList;
							if (1 == page) {
								list.length = 0;
							}

							list = [...list, ...records];
							hasMore = total > list.length;
							this.postList.hasMore = hasMore;
							this.postList.list = list;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else if (list.length > 3) {
								this.load.loading = true
								this.load.status = 'nomore'
							} else {
								this.load.status = 'nomore'
							}
							// this.mescroll.endSuccess(records.length, hasMore);
							this.postList.page = page;
						}, () => {
							// this.mescroll.endErr();
						}, () => {
							resolve();
							this.postList.loading = true
						}
					);
				});
			},
			onCheckLogin() {
				if (!app.globalData.isLogin) {
					app.doLogin();
					return false;
				}
				return true;
			},
			goPage(url) {
				// if (!this.onCheckLogin()) {
				// 	return false;
				// }
				uni.navigateTo({
					url: url,
				});
			},

			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		width: 100vw;
		background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/order-header.png');
		background-repeat: no-repeat;
		background-size: 100vw 202rpx;
		box-sizing: border-box;
		// padding-bottom: 130rpx;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #fff;
				// color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}

			.tabs-list {
				box-sizing: border-box;
				padding: 20rpx 0 20rpx 48rpx;
				// background: #FFFFFF;
				width: 100%;
				display: flex;
				align-items: center;

				.tabs {
					font-size: 32rpx;
					font-weight: 900;
					color: #999999;
					line-height: 44rpx;
					margin-right: 28rpx;

					&.active {
						font-size: 36rpx;
						font-weight: 900;
						color: #222222;
						line-height: 44rpx;
						position: relative;
						z-index: 2;
						// transition: all .3s;

						&::before {
							content: "";
							display: block;
							width: 48rpx;
							height: 48rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community//tab-active.png');
							background-size: 100%;
							position: absolute;
							right: -10rpx;
							bottom: -18rpx;
							z-index: -1;
						}
					}
				}
			}
		}

		.main {
			box-sizing: border-box;
			// padding: 176rpx 32rpx 66rpx;
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);
			padding: 16rpx 24rpx 10rpx;

			.main-loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
			}

			.appraise-list {
				box-sizing: border-box;
				// padding: 0 24rpx 0;

				.appraise-item {
					box-sizing: border-box;
					padding-bottom: 37rpx;
					margin-top: 23rpx;

					&.noBorder {
						border: none;
					}
				}

				.refer-box {
					display: flex;
					margin-top: 27rpx;
					box-sizing: border-box;
					padding-left: 106rpx;
					align-items: center;
				}

				.refer {
					flex-shrink: 0;
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 33rpx;
				}

				.order {
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.accompany-profile {
						width: 42rpx;
						height: 42rpx;
						border-radius: 50%;
						flex-shrink: 0;
						margin-right: 7rpx;
						position: relative;

						.avatarUrl {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.user-name {
						font-size: 24rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 33rpx;
					}

					.order-per {
						max-width: 80%;
						font-size: 28rpx;
						font-weight: 900;
						color: #222222;
						line-height: 44rpx;
					}

					.order-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #222222;
						line-height: 44rpx;
						margin-top: 4rpx;
					}
				}

				.delete {
					width: 100rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #E3E9E5;
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 36rpx;
					text-align: center;
					margin-top: 26rpx;
					margin-left: auto;
				}
			}
		}

		.btn-submit {
			position: fixed;
			width: calc(100% - 253rpx * 2);
			bottom: calc(constant(safe-area-inset-bottom) + 184rpx);
			bottom: calc(env(safe-area-inset-bottom) + 184rpx);
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
			border-radius: 50rpx;
		}
	}
</style>